import { cname } from '../utils'

export default function RadioCard({ calssName = '', checked, title, description = '' }) {
  return (
    <div
      className={cname(
        'flex w-96 cursor-pointer gap-2 rounded-sm border p-4 transition-all hover:border-primary/50',
        calssName,
        checked && 'border-primary bg-primary/10'
      )}
    >
      <div
        className={`h-5 w-5 min-w-5 rounded-full border border-gray-400 bg-[#fff] ${
          checked && 'flex items-center justify-center bg-primary'
        }`}
      >
        {checked && <div className="h-2 w-2 rounded-full bg-gray-50" />}
      </div>
      <div>
        <div className="mb-2 mt-0.5 text-sm font-medium leading-none">{title}</div>
        <div className="text-sm text-muted-foreground">{description}</div>
      </div>
    </div>
  )
}
